<template>
	<div>
		<div class="ui top segment" style="text-align: center" >
			<h2 class="m-text-500"><span style="font-weight: 900;">“{{ categoryName }}”</span> ——文章分类</h2>
		</div>
		<BlogList :getBlogList="getBlogList" :blogList="blogList" :totalPage="totalPage"/>
				
	</div>
</template>

<script>
	import BlogList from "@/components/blog/BlogList";
	import {getBlogListByCategoryName} from "@/api/category";
	import {
		SET_IS_BLOG_TO_ARCHIVES,
		SET_IS_BLOG_TO_HOME,
		SET_IS_BACK,
		SET_IS_BLOG_TO_TAG,
		SET_IS_CATEGORY_TO_CATEGORY
	} from "@/store/mutations-types";
	import {mapState} from 'vuex';
	export default {
		name: "Category",
		components: {BlogList},
		data() {
			return {
				blogList: [],
				totalPage: 0,
				isfrom:false,
				isupdate:false,
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				//如果是从 非文章页 进入分类页面
				if(from.name != 'blog' ){
					// 正确显示分页
					vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, false)
					vm.$store.commit(SET_IS_BLOG_TO_HOME, true)
					vm.$store.commit(SET_IS_BLOG_TO_TAG, true)
					// 从 非文章页 进入分类页面改为false,以免受别的页面影响
					// console.log("首次进入，isBack",vm.isBack)
					vm.$store.commit(SET_IS_BACK, false)
					vm.$store.commit(SET_IS_CATEGORY_TO_CATEGORY, true)
					vm.getBlogList()
					vm.scrollToTop()
					// console.log(localStorage.key(SET_IS_BLOG_TO_ARCHIVES))
					// vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, false)
				//如果是从 文章页 进入分类页面
				}else{
					if(vm.$store.state.isBack){
						//从文章页面跳转到分类时 且是返回键返回的，使用首页缓存，否则不使用
						vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, true)
						// console.log("此时从文章页返回分类页，是返回键,isback",vm.$store.state.isBack)
					}else{
						// console.log("此时从文章页返回分类页，但不是返回按键")
						//正确显示分页
						vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, false)
						vm.$store.commit(SET_IS_BLOG_TO_HOME, true)
						vm.$store.commit(SET_IS_BLOG_TO_TAG, true)
						// 从 非文章页 进入分类页面改为false,以免受别的页面影响
						// console.log("首次进入，isBack",vm.isBack)
						vm.$store.commit(SET_IS_BACK, false)
						vm.getBlogList()
						vm.scrollToTop()
					}
					
					
				}
				
			})
		},
		beforeRouteLeave (to, from, next) {
		// this.$store.commit(SET_IS_BLOG_TO_ARCHIVES, false)
		  next()
		},
		beforeRouteUpdate (to, from, next) {
				this.$store.commit(SET_IS_BACK, false)
				// console.log("路由守卫更新isBack为",this.isBack)
		  next()
		},
		watch: {
			// 在当前组件被重用时且不是从blog跳转来的，要重新获取博客列表
			'$route.fullPath'() {
				// console.log("是否是从blog来的",this.isfrom)
				// console.log(this.$store.state.isBack)
				if (this.$route.name === 'category' && this.$store.state.isBack==false) {
					this.$store.commit(SET_IS_BLOG_TO_ARCHIVES, false)
					this.$store.commit(SET_IS_BLOG_TO_HOME, true)
					this.$store.commit(SET_IS_BLOG_TO_TAG, true)
					// 组件重用
					console.log("组件重用")
					// console.log(this.isCategoryToCategory)
					this.$store.commit(SET_IS_CATEGORY_TO_CATEGORY, true)
					this.getBlogList()
					this.scrollToTop()
					// console.log("组件重用导致重新获取,且isBack为",this.isBack)
				}
				
			}
			
		},
		created() {
			// this.getBlogList()
		},
		computed: {
			categoryName() {
				return this.$route.params.name
			},
			...mapState(['isBack','isCategoryToCategory'])
		},
		
		methods: {
			getBlogList(pageNum) {
				getBlogListByCategoryName(this.categoryName, pageNum).then(res => {
					if (res.code === 200) {
						this.blogList = res.data.list
						this.totalPage = res.data.totalPage
						this.$nextTick(() => {
							Prism.highlightAll()
						})
					} else {
						this.msgError(res.msg)
					}
				}).catch(() => {
					this.msgError("请求失败")
				})
			}
		}
	}
</script>

<style scoped>

</style>